<template>
	<view class="outer_box">
		<!-- <view v-if="isNull" class="cart_null">
			<image src="../../static/lipdee/dingdan_null.png" mode=""></image>
			<text>暂时还没有订单记录~</text>
			<button class="btn-shop-list" @tap="shopList()">去逛逛</button>
		</view> -->
		<view class="">
			<view class="tab-box">
				<view class="" @tap="changeTap('')">
					<view :class="active==''?'order-status':'' ">全部订单</view>
					<view :class="active==''?'short-line':'short-line-n' "></view>
				</view>
				<view class="">
					<view :class="active==-1?'order-status':'' " @tap="changeTap(-1)">待付款</view>
					<view :class="active==-1?'short-line':'short-line-n' "></view>
				</view>
				<view class="" @tap="changeTap(1)">
					<view :class="active==1?'order-status':'' ">待使用</view>
					<view :class="active==1?'short-line':'short-line-n' "></view>
				</view>
				<view class="" @tap="changeTap(2)">
					<view :class="active==2?'order-status':'' ">已完成</view>
					<view :class="active==2?'short-line':'short-line-n' "></view>
				</view>
				<view class="" @tap="changeTap(3)">
					<view :class="active==3?'order-status':'' ">已取消</view>
					<view :class="active==3?'short-line':'short-line-n' "></view>
				</view>
				<view class="" @tap="changeTap(9)">
					<view :class="active==9?'order-status':'' ">退款</view>
					<view :class="active==9?'short-line':'short-line-n' "></view>
				</view>
			
			</view>
			<view class="tab-content" v-if="!isNull">
				<scroll-view scroll-y="true" :style="{height:height+'px'}" :refresher-triggered=refresherTriggered :refresherThreshold=refresherThreshold
					@refresherrefresh='refresherrefresh()' @scrolltolower='nextPage()'
					lower-threshold="500">
				<view class="product-box" v-for="(gooditem,goodindex) in orderList">
					<view class="" @tap='openOrderInfo(gooditem.orderNumber)'>
						<shopTitle class="title" color='#666' fontSize='24rpx' :content="gooditem.shopName">
							<view class="status" v-if="gooditem.orderStatus==3||gooditem.orderStatus==4">
								订单已取消
							</view>
							<view class="status" v-if="gooditem.orderStatus==-1">
								待付款
							</view>
							<view class="status" v-if="gooditem.orderStatus==2">
								已完成
							</view>
							<view class="status" v-if="gooditem.orderStatus==-3">
								退款中
							</view>
							<view class="status" v-if="gooditem.orderStatus==-4">
								退款成功
							</view>
							<view class="status" v-if="gooditem.orderStatus==-5">
								退款失败
							</view>
							<view class="status" v-if="gooditem.isTakes==3&&gooditem.orderStatus == 1">
								<view class="status" v-if="gooditem.takesState==1">
									待发货
								</view>
								<view class="status" v-if="gooditem.takesState==2">
									配送中
								</view>
							</view>
							<view class="status" v-if="gooditem.isTakes==-1&&gooditem.orderStatus == 1">
								<view class="status">
									待使用
								</view>
							</view>
							
						</shopTitle>
					</view>
					<view class=""  @tap='openOrderInfo(gooditem)'>
						<productInfo class="productInfo" v-for="(item,index) in gooditem.goodSkuDto" :productInfo='item'>
							<view slot='sku' class="sku"></view>
							<view  slot='number-btn'>x{{item.number}}</view>
							<view slot='price' class="price">￥{{item.goodsPrice}}</view>
						</productInfo>
					</view>
			
					
					<view class="btn-box">
						<view class="" v-if="gooditem.isTakes==3&&gooditem.orderStatus == 1">
							<view class="grey" v-if="gooditem.takesState==2" @tap="openLogistics(gooditem.orderNumber)">
								查看物流
							</view>
						</view>
						<view class="yellow" v-if="gooditem.isTakes==-1&&gooditem.orderStatus == 1" @tap='payOrder(2,gooditem.goodsPrice,gooditem.orderNumber)'>
							查看卷码
						</view>
						<view class="grey" v-if="gooditem.orderStatus==-1" @tap="updateOrderState(gooditem,4)">
							取消订单
						</view>
						<view class="yellow" v-if="gooditem.orderStatus==-1" @tap="open(gooditem)">
							立即付款
						</view>
						<view class="yellow" v-if="gooditem.orderStatus==-3" @tap="refundInfo(gooditem.orderNumber)">
							查看详情
						</view>
						<view class="" v-if="gooditem.isTakes==3&&gooditem.orderStatus == 1">
							<view class="yellow" v-if="gooditem.takesState==2" @tap='updateOrderState(gooditem,2)'>
								确认收货
							</view>
						</view>
						<!-- <view class="yellow" v-if="gooditem.orderStatus=='3'&&gooditem.isTakes=='3'" @tap='updateOrderState(gooditem,2)'> -->
						<!-- <view class="grey" v-if="gooditem.orderStatus==-1&&gooditem.isTakes=='3'" @tap="updateOrderState(gooditem,4)">
							取消订单
						</view>
						<view class="yellow" v-if="gooditem.orderStatus==-1" @tap="open(gooditem)">
							立即付款
						</view>
						<view class="yellow" v-if="gooditem.orderStatus==-3" @tap="refundInfo(gooditem.orderNumber)">
							查看详情
						</view>
						<view class="yellow" v-if="gooditem.orderStatus=='3'&&gooditem.isTakes=='3'" @tap='updateOrderState(gooditem,2)'>
							确认收货
						</view> -->
					</view>
				</view>
				
				</scroll-view>
			</view>
			<view class="cart_null" v-if="isNull">
				<image src="../../static/lipdee/dingdan_null.png" mode=""></image>
				<text>暂时还没有订单记录~</text>
				<!-- <button class="btn-shop-list" @tap="shopList()">去逛逛</button> -->
			</view>
		</view>
		<uni-popup ref="popup" :mask-click="false">
					<view  class="pop-cart">
						<view class="cart_top">
							<image src="../../static/lipdee/x@2x.png" mode="" @tap="closePup"></image>
							<!-- <text class="iconfont iconcha" @tap="closePup"></text> -->
							<!-- 占位符 -->
							<text></text>
						</view>
						<view class="qrcode-title">
							商家扫码即可完成核销
						</view>
		
						<view class="cart_bot">
							<canvas canvas-id="qrcode" style="width: 250px;height: 250px;margin: 0 auto;" class="animated fadeIn" />
						</view>
		
					</view>
		
				</uni-popup>
		<wybpopup ref="popup1" type='bottom'>
			<view class="popup">
				<view class="popup_top item">
					<view class="">
						相伴测试专用商家
					</view>
					<view class="">
						￥ {{price}}
					</view>
				</view>
				<view class="popup_top">
					<view class="">
						支付方式
					</view>
					<view class="">
						会员余额：{{userInfo.userInfo.money}}
					</view>
				</view>
				<view class="line">
					
				</view>
				<view class="popup_pay">
					<!-- <view class="pay_c"> -->
						<view class="">
							需付款
						</view>
						<view class="">
							￥{{price}}
						</view>
					<!-- </view> -->
				</view>
				<button class="paymentBtn" type="default" @tap='pay()'>
					支付
				</button>
			</view>
		
		</wybpopup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js'
	import wybpopup from '@/components/wyb-popup/wyb-popup.vue'
	export default {
		components: {
			wybpopup
		},
		data() {
			return {
				num:'',
				payState:'',
				pupPrice:'',
				pupOrderNo:[],
				price: 0,
				orderList:[],
				pageNum: 1,
				pageSize: 10,
				isNull: false,
				hasNextPage: true,
				refresherThreshold: 50,
				refresherTriggered: false,
				_refresherTriggered: false,
				active: '',
				height: 500,
				productInfo:{
					title:'进口苹果',
					image:'https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/login/logo.png',
					sku:'1000g',
					price:'30'
				},
				productInfo2:{
					title:'零瑕疵显微镜口腔洁牙护理套餐',
					image:'https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/login/logo.png',
					price:'1990'
				}

			};

		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.height = res.windowHeight - uni.upx2px(120)
				}
			})
		},
		onShow() {
			this.getUserInfo()
			this.changeTap(this.active)
			uni.$on("carData", (rel) => {
				carData = rel
				if (carData == 1) { //充值页面返回
					this.changeTap(carData)
				}else if (carData == 9) { //退款返回
					this.changeTap(carData)
				} else{
					this.changeTap('')
				}
			})
			// this.getOrderList()
		},
		onLoad(option) {
			this.num = option.num
			this.changeTap(option.num)
		},
		computed: mapState(['userInfo','loginState']),
		methods: {
			...mapMutations(['login', 'logout','setUserInfo']),
			// 获取用户信息
			getUserInfo() {
				this.$api_http.getUserInfo().then((res) => {
					let userInfo = res.data.dataMap
					// this.getUserIn = res.data.dataMap
					console.log(userInfo)
					if (userInfo != null) {
						this.setUserInfo(userInfo)
					}
			
				})
			
			},
			//关闭弹框
			closePup() {
				this.$refs.popup.close()
			},
			payOrder(payState, pupPrice, pupOrderNo) {
				let _this = this
				console.log(pupOrderNo)
				this.payState = payState
				this.pupPrice = pupPrice
				// this.pupOrderNo.splice(0)
				this.pupOrderNo.push(pupOrderNo)
				this.$refs.popup.open('center')
				// if(payState===1){
				// 	this.$refs.popup1.show()
				// 	// this.$refs.popup.open('bottom')
				// }else if(payState===2){
				// 	// this.$refs.popup1.show()
				// 	this.$refs.popup.open('bottom')
				// }
				
				setTimeout(function() {
					_this.make(pupOrderNo)
				}, 100);
			},
			async make(pupOrderNo) {
				console.log(pupOrderNo)
				// 回调方式
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: pupOrderNo,
					size: 250,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					correctLevel: uQRCode.errorCorrectLevel.H,
					success: res => {
						console.log(res)
					}
				})
			},
			pay() {
				//选择支付弹框
				let type=3
				// if(this.current===0){
				// 	type=1
				// }
				// if(this.current===1){
				// 	type=2
				// }
				let _this = this;
				uni.showLoading({
					title: '正在支付...',
					mask: true
				})
				let arr = []
				arr.push(this.pupOrderNo)
				this.$api.payOrder({
					orderNo: arr,
					type:3
				}).then((res) => {
					
					if(type==3){ //余额支付
						if (res.data.code == 200) {
							// uni.navigateTo({
							// 	url: '../pay/pay-state'
							// });
							uni.showToast({
								title: '支付成功',
								duration: 1000,
								icon: "none"
							});
							_this.close()
						} else {
							uni.hideLoading()
							uni.showToast({
								title: res.data.msg,
								duration: 1000,
								icon: "none"
							});
							_this.close()
							setTimeout(function() {
								uni.navigateTo({
									url: '../member/toUp'
								});
							}, 1000);
						
						}
					}			
				})
			
			},
			open(item) {
				this.price = item.goodsPrice
				this.pupOrderNo = item.orderNumber
				this.$refs.popup1.show()
			},
			close() {
				this.$refs.popup1.hide()
			},
			openLogistics(orderNumber){
				uni.navigateTo({
					url:'../logistics/logistics?orderNumber='+orderNumber
				})
			},
			//取消订单
			updateOrderState(state,num) { 
				let takesState = ''
				let userOrderStatus = ''
				let arr = []
				if (num == 2) {
					takesState = 3
				}
				arr.push(state.orderNumber)
				this.$api.updateOrderState({
					orderNo: arr,
					orderStatus: num,
					// takesState: takesState
				}).then((res) => {
					if (res.data.success) {
						uni.showToast({
							title: "成功",
							duration: 1000,
						});
						this.changeTap('')
						// uni.$emit("carData", 1)
						// setTimeout(function() {
						// 	uni.navigateBack({
						// 		delta: 1
						// 	});
						// }, 1100);
			
					} else {
						uni.showToast({
							title: "订单删除失败",
							duration: 1000,
							icon: 'none',
						});
					}
				})
			},
			refundInfo(orderNumber){
				uni.navigateTo({
					url:'refundInfo?orderNumber='+orderNumber
				})
			},
			nextPage() {
				let _this = this
				console.log("====出发底部===")
				console.log("====出发底部===" + this.pageNum)
				console.log("====出发底部===" + this.hasNextPage)
				if (this.hasNextPage) {
					this.pageNum = this.pageNum + 1
					this.$api.getOrderList({
						orderStatus: this.active
					}, this.pageNum, this.pageSize).then((res) => {
						if (res.data.code == 200) {
							// console.log("-----"+JSON.stringify(this.orderList))
							for (var i = 0; i < res.data.data.list.length; i++) {
								_this.orderList.push(res.data.data.list[i])
							}
							this.hasNextPage = res.data.data.hasNextPage
			
						}
					})
				}
			
			},
			refresherrefresh() {
				console.log("自定义下拉刷新被触发");
				let _this = this;
				if (_this._refresherTriggered) {
					return;
				}
				_this._refresherTriggered = true;
				//界面下拉触发，triggered可能不是true，要设为true
				if (!_this.refresherTriggered) {
					_this.refresherTriggered = true;
				}
				this.getOrderList(_this.payState)
				setTimeout(() => {
					_this.refresherTriggered = false; //触发onRestore，并关闭刷新图标
					_this._refresherTriggered = false;
				}, 1500)
			
			},
			//获取订单列表
			async getOrderList(payState) {
			 await console.log(payState)
			  let _this = this
			  this.pageNum = 1
			  this.$api.getOrderList({
			    orderStatus: payState
			  }, this.pageNum, this.pageSize).then((res) => {
			    if (res.data.code == 200) {
			      _this.orderList = res.data.data.list
			      console.log("11====" + JSON.stringify(_this.orderList))
			      _this.isNull = _this.orderList.length < 1 ? true : false
			      _this.hasNextPage = res.data.data.hasNextPage
			
			    }
			  })
			},
			openApplyRefund(){
				uni.navigateTo({
					url:'applyRefund'
				})
			},
			//服务详情
			openOrderServerInfo(){
				uni.navigateTo({
					url:'orderInfoServer'
				})
			},
			openOrderInfo(item) {
				if(item.orderStatus==-3||item.orderStatus==-4||item.orderStatus==-5){
					
				}else{
					if(item.isTakes==3){//物流详情
						uni.navigateTo({
							url: 'orderInfo?orderNumber='+item.orderNumber
					    })
					}else if(item.isTakes==-1){//服务详情
						uni.navigateTo({
							url:'orderInfoServer?orderNumber='+item.orderNumber
						})
					}
				}
				
				
			},
			changeTap(i) {
				this.active = i
				this.getOrderList(this.active)
			}
		}
	}
</script>

<style lang="less" scoped>
	.cart_null {
		display: flex;
		width: 100%;
		flex-direction: column;
	}
	
	.cart_null text {
		margin: 0 auto;
		color: #666666;
	}
	
	.cart_null image {
		margin: 60rpx auto;
		width: 250rpx;
		height: 250rpx;
	}
	.djc-s-a {
		display: flex;
		justify-content: space-between;
		align-items: center;
	
	}
	
	.djc-c-a {
		display: flex;
		justify-content: center;
		align-items: center;
	
	}
	.pop-cart {
		width: 550rpx;
		height: 650rpx;
		background-color: #ffffff;
		padding: 20rpx;
		border-radius: 15rpx;
		.cart_top image{
			width: 50rpx;
			height: 50rpx;
		}
		.qrcode-title {
			text-align: center;
			color: #b0b0b0;
		}
		.cart_bot{
			margin: 0 auto;
			margin-top: 15rpx;
		}
		
	}
	.btn-shop-list {
		background: linear-gradient(90deg, #FF8308 0%, #FFBF69 100%);
		border-radius: 50rpx;
		width: 200rpx;
		color: #FFFFFF;
		line-height: 75rpx;
		margin-top: 40rpx;
	}
	.pop-cart-list-5 text {
		font-size: 36rpx;
		font-weight: 600;
		color: #FF5551;
		padding: 20rpx 0 0 0;
	
	}
	.popup{
		width: 750rpx;
		height: 785rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		overflow: hidden;
		z-index: 9999;
		.popup_top{
			width: 690rpx;
			height: 70rpx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 32rpx;
			font-weight: 400;
			color: #666666;
		}
		.popup_pay{
			width: 750rpx;
			height: 300rpx;
			text-align: center;
			view:nth-child(1){
				margin-top: 100rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #666666;
			}
			view:nth-child(2){
				font-size: 56rpx;
				font-weight: 400;
				color: #FF8308;
			}
		}
		.item{
			margin-top: 30rpx;
		}
		.line{
			width: 670rpx;
			height: 2rpx;
			background: #EEEEEE;
			border-radius: 1rpx;
			margin-top: 30rpx;
		}
		.paymentBtn{
			background-color: #FF8308 ;
			width: 520rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			border-radius: 45rpx;
		}
	}
	.tab-content{
		background-color: #F8f8f8
	}
	/deep/ .product-box-module{
		width: 690rpx;
	}
	// page {
	// 	background-color: #F8f8f8
	// }

	.outer_box {
		.product-box {
			margin: 0 auto;
			margin-top: 20rpx;
			padding: 20rpx;
			width: 86%;
			min-height: 200rpx;
			background: #FFFFFF;
			border-radius: 20rpx;

			.btn-box {
				display: flex;
				justify-content: flex-end;
				margin-top: 20rpx;

				view {
					width: 160rpx;
					height: 68rpx;
					font-size: 24rpx;
					line-height: 68rpx;
					text-align: center;
					border-radius: 34rpx;
					margin-left: 10rpxs;
				}

				.yellow {
					margin-left: 15rpx;
					width: 160rpx;
					height: 68rpx;
					background: #FFBD66;
					border-radius: 34rpx;
					color: #FEFEFE;
				}

				.grey {
					margin-left: 15rpx;
					background: #FFFFFF;
					border: 2rpx solid #CCCCCC;
					color: #999999;

				}
			}

			.productInfo {
				display: flex;
				justify-content: flex-end;
				margin-top: 20rpx;
				.sku{
					color: #999999;
					font-size: 24rpx;
				}
				.price {
					font-size: 36rpx;
					font-weight: bold;
					color: #FF8308;
				}
			}

			.status {
				color: #FF8308;
				font-size: 24rpx;
			}
		}

		.tab-box {
			display: flex;
			justify-content: space-around;
			width: 100%;
			height: 80rpx;
			background: #FFFFFF;
			align-items: flex-end;
			font-weight: 400;
			color: #333333;

			.order-status {
				font-size: 32rpx;
				color: #333333;
				font-weight: bold;
			}

			.short-line-n {
				margin: 0 auto;
				margin-top: 20rpx;
				width: 60rpx;
				height: 6rpx;
				background: #ffffff;
				border-radius: 3rpx;
			}

			.short-line {
				margin: 0 auto;
				margin-top: 20rpx;
				width: 60rpx;
				height: 6rpx;
				background: #FF8308;
				border-radius: 3rpx;
			}
		}
	}
</style>
